<template>
  <div class="ynwj-box">
    <div class="ynwj">
      <!-- tit -->
      <div class="tit">
        <h2>为什么选择“一诺万金”</h2>
        <p>一诺万金视信誉为生命，核心团队十年政企数字化经验，一诺万金，值得托付</p>
      </div>
      <!-- tit/ -->
      <!-- con -->
      <div class="con">
        <!-- 每一项 -->
        <div
          class="con-item"
          v-for="item in message"
          :key="item.img"
        >
          <!-- img -->
          <div class="img-box">
            <img :src="item.img" alt="">
          </div>
          <!-- text -->
          <div class="text-box">
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
      <!-- con/ -->
    </div>
  </div>
</template>

<script>
export default {
  name: "Ynwj",
  data() {
    return {
      message: [
        {
          name: "zzyf",
          img: require("assets/img/home/why/zzyf.png"),
          text: "公司为技术型团队，核心产品自主研发，自主知识产权，成本可控，项目实施、迭代升级，运维服务有保障"
        },
        {
          name: "dzkf",
          img: require("assets/img/home/why/dzkf.png"),
          text: "针对战略客户提供项目定制化开发或者人力外包服务，满足客户多样化的需求，对比同类产品竞争力更强"
        },
        {
          name: "jsxj",
          img: require("assets/img/home/why/jsxj.png"),
          text: "基于SpringBoot微服务架构、Java技术路线，采用互联网、物联网、云计算、大数据、可视化等核心技术"
        },
        {
          name: "lhms",
          img: require("assets/img/home/why/lhms.png"),
          text: "秉承诚实守信、开放长远的合作心态，可依据项目/用户/伙伴情况提供多样性的合作方案，总有一款适合你"
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .ynwj-box {
    width: 100%;
    height: 540px;
    padding: 40px 0;
    margin-bottom: 40px;
    background-image: url("../../assets/img/home/why/why-us-bg.png");
  }

  .ynwj {
    width: 62.5%;
    margin: 0px auto;
    text-align: center;
  }

  /* 标题样式 */
  .ynwj .tit h2 {
    font-size: 36px;
    font-weight: 1000;
    color: #fff;
  }

  .ynwj .tit p {
    font-size: 16px;
    color: #fff;
  }

  /* 内容样式 */
  .ynwj .con {
    display: flex;
    margin: 40px 0;
  }

  .ynwj .con .con-item {
    flex: 1;
    background-color: #fff;
    opacity: 0.65;
    padding: 40px;
    margin: 0 8px;
  }

  /* hover */
  .ynwj .con .con-item:hover {
    cursor: pointer;
    opacity: 0.85;
    transition-duration: 0.3s;
    transform: translateY(-5px);
  }

  .ynwj .con .con-item img {
    margin-bottom: 24px;
  }

  .ynwj .con .con-item p {
    font-size: 16px;
    color: #666;
    text-align: justify;
  }

  @media screen and (max-width: 900px) {
    .con {
      display: flex;
      flex-wrap: wrap;
      .con-item {
        width: 50%;
      }
    }
  }
</style>